<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ploy4J - 登录</title>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; margin: 0; }
        .login-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); width: 320px; }
        h2 { text-align: center; color: #333; margin-bottom: 20px; }
        label { display: block; margin-bottom: 5px; color: #555; }
        input[type='text'], input[type='password'] { width: calc(100% - 20px); padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; }
        button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        .error-message { color: red; text-align: center; margin-bottom: 15px; font-size: 0.9em; }
        .logout-message { color: green; text-align: center; margin-bottom: 15px; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Ploy4J 部署工具</h2>
        <div th:if="${loginError}" class="error-message" th:text="${loginError}"></div>
        <div th:if="${logoutMessage}" class="logout-message" th:text="${logoutMessage}"></div>
        <form th:action="@{/login}" method="post">
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required autofocus />
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required />
            </div>
            <div>
                <button type="submit">登录</button>
            </div>
        </form>
    </div>
</body>
</html>
 